<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>{{ rzApplyStore.getRole == 'guarantor' ? '保证人' : '承租人' }}详细信息</h2>
      </div>
      <div class="content">
        <div class="info-item">
          <div class="info-title">
            <img src="/@/assets/images/detail_title.png" alt="" />
            基本信息
          </div>
          <div class="info-content">
            <div class="bussinessCode">
              业务编号：<span>{{ formData.bussNo }}</span>
            </div>
            <a-row :gutter="20">
              <a-form :model="formData" layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-col :span="24">
                  <a-form-item label="" name="role">
                    <a-radio-group v-model:value="formData.role">
                      <a-radio value="1">客户是自然人</a-radio>
                      <a-radio value="2">客户是企业</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="5">
                  <a-form-item label="" name="fontUrl">
                    <div class="upload-item">
                      <img v-if="formData.fontUrl" :src="formData.fontUrl" alt="" />
                      <img v-else src="/@/assets/images/font.png" alt="" />
                      <input type="file" @change="(e) => onUpload(e, 'fontUrl')"    style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%"/>
                    </div>
                  </a-form-item>
                </a-col>

                <a-col :span="16">
                  <a-form-item label="" name="backUrl">
                    <div class="upload-item">
                      <img v-if="formData.backUrl" :src="formData.backUrl" alt="" />
                      <img v-else src="/@/assets/images/back.png" alt="" />
                      <input type="file" @change="(e) => onUpload(e, 'backUrl')"    style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%"/>
                    </div>
                    <p>上传照片可以自动解析，快试试吧</p>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="姓名：" name="custName">
                    <a-button class="submit small" size="small" @click="onFriendOpen">关联客户</a-button>
                    <a-input v-model:value="formData.custName" placeholder="请输入" style="width: 280rem" />
                  </a-form-item>
                </a-col>
                <a-col :span="16">
                  <a-form-item label="民族：" name="custNationCode">
                    <a-select
                      label-in-value
                      v-model:value="formData.custNationCode"
                      placeholder="请选择"
                      style="width: 280rem"
                      @change="nationChange"
                    >
                      <a-select-option v-for="item in nationData" :key="item.value" :value="item.vlaue">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="身份证号码：" name="certNo">
                    <a-input v-model:value="formData.certNo" placeholder="请输入" style="width: 280rem" />
                  </a-form-item>
                </a-col>

                <a-col :span="7">
                  <a-form-item label="证件有效期：" name="certDate">
                    <a-range-picker v-model:value="formData.certDate" type="date" :placeholder="['请选择', '请选择']" style="width: 280rem" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="" name="certLongTerm">
                    <a-checkbox v-model:checked="formData.certLongTerm">长期有效</a-checkbox>
                    <!-- <a-radio-group v-model:value="formData.certLongTerm">
                      <a-radio value="Y">长期有效</a-radio>
                    </a-radio-group> -->
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="省市区(证件)：" name="homeRegion">
                    <a-cascader
                      v-model:value="formData.homeRegion"
                      :options="regionData"
                      style="width: 280rem"
                      @change="(e, selectedOptions) => regionChange(e, selectedOptions)"
                      :field-names="{ label: 'areaName', value: 'areaId', children: 'children' }"
                      placeholder="请选择"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="14">
                  <a-form-item label="详细地址：" name="custHomeplace">
                    <a-input v-model:value="formData.custHomeplace" placeholder="请输入详细地址" />
                  </a-form-item>
                </a-col>

                <a-col :span="15">
                  <a-form-item label="手机号码：" name="custMobile">
                    <a-input v-model:value="formData.custMobile" placeholder="请输入手机号码" style="width: 280rem" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
                    <div class="next">
                      <a-button type="primary" @click="onSubmit" class="submit">下一步</a-button>
                    </div>
                  </a-form-item>
                </a-col>
              </a-form>
            </a-row>
          </div>
        </div>
      </div>
      <Friend ref="friendRefs" />
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import Back from '/@/components/go-back/index.vue';
  import Friend from './components/friend.vue';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRoute, useRouter } from 'vue-router';
  import { nation } from '/@/config/nation.js';
  import { region } from '/@/config/address.js';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  import { useUserStore } from '/@/store/modules/system/user';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import qs from 'qs';
  import { dataURItoBlob, fileCheck } from './index';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const labelCol = ref({ style: { width: '100rem' } });
  const wrapperCol = ref({ span: 0 });
  const friendRefs = ref(null);
  const nationData = ref(nation);
  const regionData = ref(region);
  const province = ref(regionData);
  const city = ref([]);
  const area = ref([]);
  const formData = ref({
    bussNo: '',
    role: '1',
    custName: '',
    custNationCode: '',
    certNo: '',
    certDate: [],
    certLongTerm: false,

    homeRegion: [],
    homeRegionOption: { code: '', value: '' },

    custHomeplace: '',
    custMobile: '',
    fontUrl: '',
    backUrl: '',
    long: false,
  });
  const mode = ref('');
  async function onSubmit() {
    let params = {};
    params = {
      role: formData.value.role,
      bussNo: formData.value.bussNo,
      custName: formData.value.custName,
      custNationCode: formData.value.custNationCode,
      custNationValue: formData.value.custNationValue,
      certNo: formData.value.certNo,
      certStartDate: formData.value.certDate[0] ? dayjs(formData.value.certDate[0]).format('YYYY-MM-DD') : '',
      certEndDate: formData.value.certDate[1] ? dayjs(formData.value.certDate[1]).format('YYYY-MM-DD') : '',
      certLongTerm: formData.value.certLongTerm ? 'Y' : 'N',
      custHomeplaceCode: formData.value.homeRegionOption.code,
      custHomeplaceValue: formData.value.homeRegionOption.value,
      custHomeplace: formData.value.custHomeplace,
      custMobile: formData.value.custMobile,
    };

    console.log(params);
    if (rzApplyStore.getRole == 'guarantor') {
      rzApplyStore.setGuarantor(params);
    } else {
      rzApplyStore.setLessee(params);
    }

    router.push({
      path: '/rzApply/make-up',
      query: {
        bussNo: formData.value.bussNo,
        mode: 'edit',
      },
    });

    return;
  }
  function nationChange(e) {
    formData.value.custNationValue = e.label[0].children;
    formData.value.custNationCode = e.value;
  }
  function uploadfile(file) {
    this.formData.append('MultipartFile', file.file);
  }
  function regionChange(e, selectedOptions) {
    formData.value.homeRegionOption = {
      code: selectedOptions[selectedOptions.length - 1].areaId,
      value: selectedOptions.map((item) => item.areaName).join(' '),
    };
    return;
  }
  function imgchange(file) {
    fileCheck(file.file, () => {});
  }

  async function onUpload(e, type) {
    const file = e.target.files[0];
    fileCheck(file, async (result) => {
      const imageUrl = dataURItoBlob(result.imageUrl);
      if (type == 'fontUrl') {
        const formData1 = new FormData();
        formData1.append('file', imageUrl);
        formData1.append('bussNo', rzApplyStore.getBussNo);
        formData1.append('idCardType', 'Z');
        const res = await rzApplyApi.ocrUpload(formData1);
        if (res.code == 0) {
          formData.value.fontUrl = res.data.imageUrl;
          formData.value.certDate = res.data.certStartDate ? [dayjs(res.data.certStartDate), dayjs(res.data.certEndDate)] : [];
          formData.value.certNo = res.data.certNo;
          formData.value.custHomeplace = res.data.custHomeplace;
          formData.value.custName = res.data.custName;
          formData.value.custNationCode = res.data.custNationCode;
          formData.value.custNationValue = res.data.custNationValue;
          formData.value.certLongTerm = res.data.certLongTerm == 'Y';
          formData.value.homeRegion = res.data.custAddressCode && [
            res.data.custAddressCode.substr(0, 2),
            res.data.custAddressCode.substr(0, 4),
            res.data.custAddressCode.substr(0, 6),
          ];
        }
      } else {
        const formData1 = new FormData();
        formData1.append('file', file);
        formData1.append('bussNo', rzApplyStore.getBussNo);
        formData.append('idCardType', 'F');
        const res = await rzApplyApi.ocrUpload(formData1);
        if (res.code == 0) {
          formData.value.backUrl = res.data.imageUrl;
          formData.value.certDate = res.data.certStartDate ? [dayjs(res.data.certStartDate), dayjs(res.data.certEndDate)] : [];
          formData.value.certNo = res.data.certNo;
          formData.value.custHomeplace = res.data.custHomeplace;
          formData.value.custName = res.data.custName;
          formData.value.custNationCode = res.data.custNationCode;
          formData.value.custNationValue = res.data.custNationValue;
          formData.value.certLongTerm = res.data.certLongTerm == 'Y';
          formData.value.homeRegion = res.data.custAddressCode && [
            res.data.custAddressCode.substr(0, 2),
            res.data.custAddressCode.substr(0, 4),
            res.data.custAddressCode.substr(0, 6),
          ];
        }
      }
    });
  }
  const onFriendOpen = () => {
    friendRefs.value.open();
  };
  async function create() {
    const res = await rzApplyApi.create({ genBussNoForm: {} });
    if (res.code == 0) {
      formData.value.bussNo = res.data.bussNo;
      rzApplyStore.setBussNo(res.data.bussNo);
    }
  }
  onMounted(() => {
    const query = route.query;
    mode.value = query.mode;
    formData.value.bussNo = query.bussNo;
    if (!query.bussNo) {
      rzApplyStore.clear();
      rzApplyStore.setMode('new');
      rzApplyStore.setRole('lessee');
      create();
    } else {
      let info = null;
      if (rzApplyStore.getRole == 'guarantor') {
        info = rzApplyStore.getGuarantor;
      } else {
        info = rzApplyStore.getLessee;
      }

      console.log(info);
      if (!info) return;
      formData.value = {
        bussNo: query.bussNo,
        role: info.role,
        custName: info.custName,
        custNationCode: info.custNationCode,
        custNationValue: info.custNationValue,
        certNo: info.certNo,
        certDate: info.certStartDate ? [dayjs(info.certStartDate), dayjs(info.certEndDate)] : [],
        certLongTerm: info.certLongTerm == 'Y',

        homeRegion: info.custHomeplaceCode && [
          info.custHomeplaceCode.substr(0, 2),
          info.custHomeplaceCode.substr(0, 4),
          info.custHomeplaceCode.substr(0, 6),
        ],
        homeRegionOption: {
          code: info.custHomeplaceCode ? info.custHomeplaceCode : '',
          value: info.custHomeplaceValue ? info.custHomeplaceValue : '',
        },

        custHomeplace: info.custHomeplace,
        custMobile: info.custMobile,
        fontUrl: info.fontUrl,
        backUrl: info.backUrl,
      };
    }
  });
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    display: flex;
    flex-direction: column;
    /deep/ .ant-form {
      width: 100%;
      .info-item {
        width: 100%;
      }
    }
    .top {
      margin-bottom: 33rem;
      display: flex;
      align-items: center;
      position: relative;
      h2 {
        width: 100%;
        font-family: Microsoft YaHei;
        font-size: 30rem;
        color: #000000;
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .content {
      flex: 1;
      overflow: auto;
    }
  }
</style>
